<template>
  <div>
    <img :src="imgs">
    <ux-grid ref="plxTable"
             border
             show-overflow
             height="900"
             :edit-config="{trigger: 'click', mode: 'row'}"
             :columns="tableColumn" />
  </div>
</template>

<script>
import imgs2 from '../../assets/logo.png'

export default {
  name: 'UxGridJsx',
  data () {
    return {
      imgs: require('../../assets/logo.png'),
      tableColumn: [
        {
          field: 'name',
          width: 200,
          title: '姓名',
          fixed: 'left',
          slots: {
            default: ({ row, column }) => {
              return [
                <span style="color: red;">{ row.name }</span>,
                <span style="color: red;">-哈哈</span>
              ]
            }
          }
        },
        {
          field: 'name',
          width: 200,
          title: '姓名2',
          fixed: 'right',
          slots: {
            default: ({ row, column },h) => {

              return [
                <span style="color: red;">{ row.name }</span>,
                <span style="color: red;">-哈哈</span>,
                h('img', {
                  attrs: {
                    src: imgs2
                  }
                })
              ]
            }
          }
        },
        {
          field: 'sex',
          title: '性别',
          width: 500,
          slots: {
            // 自定义内容
            default: ({ row, column }) => {
              // 不能这样写
              //  return row.sex > 5 ? "太监" : <span>{ row.sex }</span>
              // 你得这样写
              return row.sex < 5 ? '太监' : [<span>{ row.sex }</span>]
            },
            // 自定义头部
            header: ({ column }) => {
              return [
                <p>我还自定义了你?<span style="color: red;">{ column.title }</span></p>
              ]
            }
            // 还可以自定义的呢？有ux-table-column api里面的Scoped Slot属性对象，自己去看吧！
          }
        },
        {
          field: 'describe',
          title: '描述',
          width: 600,
          slots: {
            default: ({ row, column }) => {
              return [
                <span domPropsInnerHTML={ row.describe }></span>
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'age',
          title: '年龄',
          width: 400,
          slots: {
            default: ({ row }, h) => {
              // 你还可以返回虚拟dom VNode
              return [
                h('span', {
                  style: {
                    color: 'blue'
                  },
                  on: {
                    click: () => this.addressClickEvent(row)
                  }
                }, row.age + '，->>你点我试试！')
              ]
            }
          }
        },
        {
          field: 'sex1',
          title: 'Sex2',
          showHeaderOverflow: true,
          editRender: true,
          slots: {
            default: ({ row, column }) => {
              return [
                <span class="link" >{ row.sex1 }</span>
              ]
            },
            edit: ({ row }) => {
              return [
                <input type="text" v-model={ row.sex1 } />
              ]
            }
          }
        }
      ]
    }
  },
  mounted () {
    this.imgs = require('../../assets/logo.png')
    const data = Array.from({ length: 10000 }, (_, idx) => ({
      id: idx + 1,
      name: 'pl' + idx,
      sex: idx,
      age: idx,
      sex1: idx,
      describe: '欢迎使用umy' + idx
    }))

    this.datas = data // 知道为啥datas不在 data()方法里面定义吗？嘻嘻
    this.$refs.plxTable.reloadData(this.datas)
  },
  methods: {
    addressClickEvent (row) {
      alert('点我干嘛')
    }
  }
}
</script>

<style>

</style>